<template>
    <view class="shenqing">
        <image class="shenqingTitle"
            src="/static/shenqing/shenqingbg.png"
            mode="widthFix"
        />
        <view class="shenqingContent out-shadow">
            <view class="shenqingContentTitle flex flex-align">
               <text></text> 填写申请信息 
            </view>
            <view class="shenqingList">
                <view class="list flex flex-align">
                    <view class="left flex flex-align">
                        <text></text> 姓名
                    </view>
                    <view class="right">
                        <input v-model="Infos.name" type="text" placeholder="请输入姓名" />
                    </view>
                </view>
                <view class="list flex flex-align">
                    <view class="left flex flex-align">
                        <text></text> 手机号
                    </view>
                    <view class="right">
                        <input v-model="Infos.phone" type="number" placeholder="请输入手机号" />
                    </view>
                </view>
                <view class="list flex flex-align">
                    <view class="left flex flex-align">
                        <text></text>社区名称
                    </view>
                    <view class="right">
                        <input type="text" v-model="Infos.community_name" placeholder="请输入社区名称">
                    </view>
                </view>
                <view class="list flex flex-align">
                    <view class="left flex flex-align">
                        <text></text> 代理邀请码
                    </view>
                    <view class="right">
                        <input v-model="Infos.inviter_code" type="text" placeholder="请输入代理邀请码" />
                    </view>
                </view>
                <view class="list flex flex-align">
                    <view class="left flex flex-align">
                        <text></text> 地区选择
                    </view>
                    <view class="right" @click="pickerShow = true">
                        <view class="input">{{Infos.address_area||"请选择省市县"}}</view>
                    </view>
                </view>
                <view class="list flex flex-align">
                    <view class="left flex flex-align">
                        <text></text> 详细地址
                    </view>
                    <view class="right">
                        <input v-model="Infos.address" type="text" placeholder="请输入详细地址" />
                    </view>
                </view>
                <view class="list flex" style="height: auto;">
                    <view class="left flex flex-align">
                        <text></text> 门头照
                    </view>
                    <view class="right" @click="upLoadImg">
                        <view v-if="!Infos.image" class="ImgUld flex flex-align flex-center flex-column ">
                            <uni-icons type="plusempty" size="24" color="#767E9A" ></uni-icons>
                            <text>上传图片</text>
                        </view>
                        <image v-else :src="Infos.image" class="ImgUld" />
                    </view>
                </view>
            </view>
        </view>
        <view class="settingBtn">
            <button class="btn blue-linear " @click="onSubmit">提交申请</button>
        </view>
        <YyCityPicker v-model="pickerShow" :value="city" @confirm="pickerConfirm" />
    </view>

</template>

<script setup lang="ts">
import { toast, uploadFile } from '@/utils'
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue'
import API_CENTER from '@/api/teamcenter'
import YyCityPicker from '../eidtshenqing/components/yy-city-picker/yy-city-picker.vue'
const pickerShow = ref(false)
const city = ref(['', '', ''])
const Infos = reactive({
    name: '',
    phone: '',
    community_name:'',
    longitude:'1',
    latitude:'1',
    address_area:'',
    address:'',
    image:'',
    inviter_code:'',
    status:2,
    isstatus:''
});
onLoad(()=>{
    getDetail()
})

const getDetail = (()=>{
    API_CENTER.communityInfo().then((res:any) => {
        console.log("communityInfo res ==> ", res);
        if(res.info.status==2){
            Infos.name = res.info.name
            Infos.phone = res.info.phone
            Infos.community_name = res.info.community_name
            Infos.longitude = res.info.longitude
            Infos.latitude = res.info.latitude
            Infos.address_area = res.info.address_area
            Infos.image = res.info.image
            Infos.address = res.info.address
            Infos.inviter_code = res.info.inviter_code
            Infos.status = res.info.status
            Infos.isstatus = res.info.status
        }
    })
})
const pickerConfirm = (val: string[]) => {
  Infos.address_area = val[0] + val[1] + val[2]
}

const upLoadImg = (()=>{
    // 图片上传
    uni.chooseImage({
        count: 1,
        success: (res) => {
            console.log("chooseImage res ==> ", res);
            uploadFile(res.tempFilePaths[0]).then((res:any) => {
                console.log("uploadFile res ==> ", res);
                Infos.image = res.url
            }).catch((err) => {
                console.log("uploadFile err ==> ", err);
            })
        },
        fail: (err) => {
            console.log("chooseImage err ==> ", err);
        }
    })
})

const onSubmit = () => {

  if(Number(Infos.isstatus)===2){
    return toast('您已提交过申请，等待审核')
  }
  API_CENTER.communityApply(Infos).then((res) => {
    toast('申请已提交，请等待审核')
    setTimeout(()=>{
        uni.navigateBack()
    },2000)
    
  })
};

</script>

<style scoped lang="scss">
.shenqing{
    padding-bottom: 30rpx;
    .shenqingTitle{
       width: 100%;
    }
    .shenqingContent{
        padding: 20rpx 35rpx;background: #fff;margin: -160rpx 30rpx 0;border-radius: 20rpx;position: relative;z-index: 111;
        .shenqingList{
            margin-top: 20rpx;margin-bottom: 20rpx;
            .list{height: 80rpx;background: linear-gradient(to right, #FAFCFF, #F5F6FA);border-radius: 10rpx;margin-bottom: 30rpx;
                .left{
                    color: #323233;padding: 0 0 0 20rpx;width:150rpx;font-weight: bold;
                    text{
                        width: 8rpx;height: 8rpx;background: #3B59FF;border-radius: 50%;margin-right: 10rpx;
                    }
                }
                .right{
                    input,.input{
                        color: #323233;padding: 0 20rpx;width: 100%;font-size: 28rpx;
                    }
                }
                .ImgUld{
                    width: 170rpx;height: 170rpx;margin: 30rpx;
                    background: #fff;border-radius: 10rpx;
                    text{
                        font-size: 24rpx;color: #767E9A;
                    }
                }
            }
        }

    }

    .shenqingContentTitle{
      font-size: 32rpx;font-weight: bold;margin-bottom: 40rpx;
      color: #323233;
      text{
        width: 8rpx;height: 26rpx;background: #1E4FFF;border-radius: 4rpx;margin-right: 10rpx;
      }
    }
    .settingBtn{
        margin-top: 40rpx;
    }

}
</style>
